${response.setContentType("text/html")}
${response.setHeader("Cache-Control", "no-cache")}
${response.setCharacterEncoding("UTF-8")}
<#--${response.setContentType("text/plain")}-->
<html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Connect Web Server</title>


    <!-- Framework CSS -->
    
    <link rel="stylesheet" href="static/css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="static/css/blueprint/print.css" type="text/css" media="print">
    <!--[if lt IE 8]><link rel="stylesheet" href="static/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

    <!-- Import fancy-type plugin for the sample page. -->
    <link rel="stylesheet" href="static/css/blueprint/fancytype.css" type="text/css" media="screen, projection">
    
    <!-- Custom styles to override framework -->
     <link rel="stylesheet" href="static/css/main.css" type="text/css" media="screen, projection">
     
     <script src="../static/js/codemirror/codemirror.js"></script>
	<link rel="stylesheet" href="../static/css/codemirror/codemirror.css">
	<script src="../static/js/codemirror/mode/htmlmixed.js"></script>
	<script src="../static/js/codemirror/mode/css.js"></script>
	<script src="../static/js/codemirror/mode/javascript.js"></script>
	<script src="../static/js/codemirror/mode/xml.js"></script>
	<style>
		.CodeMirror { background: #f3f3f3; border:1px solid gray; height:300px}
		.CodeMirror-scroll {height:100%; }
		h1 {font-weight:normal;font-size:2em;line-height:1;margin-bottom:0.5em;}
	</style>
     
     
  </head>
<body>
    <div class="container">
   
   <div class="right box"> ${server.time.getTimeString()} ${server.time.getDateString()}
   <#if !session.isAnonymous()>
   <br/> User: ${session.getUser()} [<a href="doLogout">Logout</a>]
   <#else>
   <form action="/doLogin" method="GET" >
Username:<input name="name" type="text" /><BR/> Password:<input name="password" type="password"/><button name="Submit" type="submit">Login</button> 
</form>
   </#if>
 
   
   </div>
    
     <br/>
      <h1><a href="/"><img src="static/images/ConnectLogo.png"  alt="Connect" style="vertical-align:middle;" ></a>  Connect Web Server</h1>
         <hr>
      <div class="span-24">
        
        <!-- Content -->
        <h2> Address Book Mashup </h2>
        <p>This example uses a mysql to store a simple address book. It consists of this page, and a script to handle the insertion/deletion of records.</p>
        <p>The application uses 3 data sources defined in the data.xml (Data source configuration) file as shown below: </p>
       
        
<textarea id="code" name="code" style="display: none; border:1px solid gray; padding:4px;">
  <datasource name="AddressBookListing"
		class="com.binarycube.webserver.datasource.JDBCDataSource">
		<config>
			<url>jdbc:mysql://localhost:3306/world</url>
			<user></user>
			<password></password>
			<query>SELECT  * from `person`;</query>
		</config>
	</datasource>
	
	<datasource name="AddressBookInsertion"
		class="com.binarycube.webserver.datasource.JDBCDataSource">
		<parameters>
			<parameter name="name" default="" />
			<parameter name="surname" default="" />
			<parameter name="email" default="" />
		</parameters>
		<config>
			<url>jdbc:mysql://localhost:3306/world</url>
			<user>connect</user>
			<password>connectme</password>
			<query>INSERT INTO `person` (`name`,`surname`,`email`) VALUES (:name, :surname, :email);</query>
			<type>UPDATE</type>
		</config>
	</datasource>
	
	<datasource name="AddressBookDeletion"
		class="com.binarycube.webserver.datasource.JDBCDataSource">
		<parameters>
			<parameter name="id" default="" />
		</parameters>
		<config>
			<url>jdbc:mysql://localhost:3306/world</url>
			<user>connect</user>
			<password>connectme</password>
			<query>DELETE FROM `person` WHERE `id`=:id;</query>
			<type>UPDATE</type>
		</config>
	</datasource>
</textarea>
<script>
	//Initialise the editor
	var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "htmlmixed", readOnly: true});
</script>
        
        <br>
         <hr>
        
        
        <form action="script/AddressBook">
        <fieldset>
        <legend>New Contact</legend>
            <p><label for="name" >Name:</label> <input name="name" class="field"></p>
        	<p><label for="surname" >Surname:</label><input name="surname" class="field"></p>
        	<p><label for="email" >Email:</label> <input name="email" class="field"></p>
        	<p class="footer"><button >Submit</button></p>
	     </fieldset>
	     </form>
               
         <#assign ds = data.getDataSource("AddressBookListing")>
    
    	
    	<table class="DataTable">
      
       <#assign isFirst=true>
       <#list ds.doQuery() as record>
       <tr>
       		<#if isFirst>
	       		<#list record.getKeys() as x>
	       			<#if x=="id">
       					<th>&nbsp;</th>
       				<#else>
       					<th>${x}</th>
       				</#if>
	       			
	       		</#list>
	       		</tr><tr>
	       		<#assign isFirst=false>
       		</#if>
       			<#list record.getKeys() as x>
       				<#if x=="id">
       					<td><a href="script/AddressBook?action=delete&id=${record.get(x)}">Delete</a></td>
       				<#else>
       					<td>${record.get(x)!""}</td>
       				</#if>
	       			
	       		</#list>
       </tr>
	  </#list>
       </table> 
      
        
        
      </div>
     
      <hr>
       <div class="last quiet right"> 
          <a href="http://www.binarycube.com"><img src="static/images/logo-bw.png" width="150" /></a><br/>
      </div>
</div>
  

</body></html>